<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<%@include file="/views/common/include/taglib.jsp"%>
	<%@include file="/views/common/include/head.jsp"%>
	<title>D 生活</title>
	<link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/shangpind.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/shangchennav.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/hot-shop.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/shop-index.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/slick.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/slick-theme.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/page.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/enterpage.css" type="text/css">
	<script src="${ctx}/js/controllers/mall/MainHomePageController.js" type="text/javascript"></script>
</head>
<style>

	.footer_ul{
	color:#959191;
	}
	.footer_ul li{
	float:left;
	text-align: center;
	border: 1px solid #9A9A9A;
	}
	.footer_ul .active {
    background-color: #28c7c9;
    color:#fff;
    }
	.footer_ul li:HOVER{
    background-color: #28c7c9;
	}
	div .shop-wrap:hover{
    box-shadow: 2px 4px 6px #A29E9E;
	}
	.shop-nav li a:hover{
	color:red;
	}
	.selected{
	color:red;
	}
	/* .padd img:hover{
	cursor:pointer;
	-webkit-transform:scale(1.1);
} */

	.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    /* color: transparent; */
    border: none;
    outline: none;
    /* background: transparent; */
    
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 0px;
    color: red;
   /*  line-height: 1;

    opacity: .75;
    color: white;
 */
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

.small-pic .slick-prev
{
    left: -18px;
    background: url(/proprietor/images/mall/shop/zuohua.png);
    width: 10px;
    height: 19px;
}
.small-pic .slick-next{
	right: -13px;
	background: url(/proprietor/images/mall/shop/youhua.png);
    width: 10px;
    height: 19px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -18px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}
	

</style>	
	<script type="text/javascript">
    var ctx = '${ctx}';
    setFYBannerSize('${bannerSize}');
    
	function gotoPage(page){
		var pages = $("#pages").val();
		var shopCategoryId = $("#shopCategoryId").val();
    	if(page == null || page == 'undefined'){
    		page = this.page;
    	}
    	if(page < 1 ){
    		layer.msg("已到达第一页!", {
				time : 2000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else if(page > pages){
    		layer.msg("已到达最后一页!", {
				time : 1000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else {
    		window.location.href= ctx + "/hotShopList?pNo=" + page + "&shopCategoryId=" + shopCategoryId; 
    	}
	}
	
	$(document).ready(function(){
		$(".padd img").hover(function(){$(this).addClass("hover")},
			function(){$(this).removeClass("hover")}
		)	
	})

	function fullPic(img){
		var index = layer.open({
			  type: 2,
			  content: 'http://http://dlife2.oss-cn-shenzhen.aliyuncs.com/' + img,
			  area: ['eypx', '195px'],
			  maxmin: true
			});
			layer.full(index);
	}
	
	function searchGoodsOrShops(){
		var selectType = $("#selectType").val();
		var name = $("#name").val();
		window.location.href = ctx +"/searchGoodsOrShops?pNo=1" + "&selectType=" +selectType +"&name=" + name;
	}
	
	function getCoupon(couponId){
		$.post(ctx +"/ownerTreasure/getCoupon", {couponId:couponId}, function(data) {
			data = JSON.parse(data);
			if (data.success) {
				layer.msg(data.msg, {
					icon : 1,
					time : 1000
				// 1秒关闭（如果不配置，默认是3秒）
				}, function() {
					//window.location.href= ctx + "/shopIndex?pNo=1&shopId=" + ${shopId};
				});
			} else {
				layer.msg(data.msg, {
					icon : 1,
					time : 2000
				// 2秒关闭（如果不配置，默认是3秒）
				});
			}
		});
	}
	
	function addToCart(goodsId,shopId,goodsName,logo,price,type,count){
		$.post(ctx +"/shopcart/addToCart",
				{goodsId:goodsId,
			     shopId:shopId,
			    	goodsName:goodsName,
			     logo:logo,
			     price:price,
			     type:type,
			     count:count
				},function(data){
					data = JSON.parse(data);
					if(data.success){
						layer.msg("加入购物车成功",{
							icon: 1,
							time: 2000 //2秒关闭（如果不配置，默认是3秒）
						});
					}
				});
	}
</script>
<body>
    <jsp:include page="/views/common/head_main.jsp" />
	<div class="bg">
	<input type="hidden" id="item" value="${sessionScope.item_mall}"/>
		<div class="contentbox1 contentbox">
			<div class="nav">
				 <ul>
                    <li><a href="${ctx}/main?item=4">商城首页</a></li><span>|</span>
                    <li><a href="${ctx}/mallSeckill">秒杀专区</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#article">精品推荐</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#hotshop">热门商铺</a></li><span>|</span>
                    <li><a href="${ctx}/mallIntegral">积分专区</a></li>
                </ul>
				<div class="seabox">
					<select class="searchhh" id="selectType" style="padding:0;">
					   <option value="1">商品</option>
					   <option value="2">店铺</option>
					</select>
					<input class="search" type="text" id="name"></input>
					<button class="searchbtn" onclick="searchGoodsOrShops()">搜索</button>
                </div>
                <div class="cartbox">
                     <img src="${ctx}/images/mall/cart.png">&nbsp;&nbsp;&nbsp;<a href="${ctx}/shopcart/shopcartList" target="_blank">我的购物车</a>
                </div>
			</div>
        </div>
		<div class="contentbox2 contentbox">
			<div id="focus" class="w">
			<c:if test="${bannerSize > 0}">
				<div class="slider">
					<ul style="position: relative;" class="slider-main"  >
						<li class="slider-panel ng-animate" style=" z-index: 1; opacity: 1;"  onmouseover="bannerOver();" onmouseout="bannerOut();">
							<div class="inner">
								
									<c:forEach begin="0" end="${bannerSize-1}" var="i">
									<c:set var="item" value="${shopBannerList[i]}"/>
										<a id="banner${i+1}" 
											<c:if test="${item.objType ==1}"> href="${ctx}/GoodsDetail?id=${item.objId}"</c:if> 
			        						<c:if test="${item.objType == 2}"> href="${item.url}"</c:if> target="_blank">
											<img alt="" src="${sessionScope.image_logo}${item.img}"  class="goods-photo" height="400" width="1200">
										</a>
									</c:forEach>
							</div>
						</li>
					</ul>
					<div id="bannerBack" class="slider-page" style="cursor: pointer;margin-top: 20px;" onmouseover="bannerOver();" onmouseout="bannerOut();">
						<ul class="slider-nav" style="width: 1200px;margin-top: -70px;">
							<c:if test="${bannerSize > 0}">
								<c:forEach begin="0" end="${bannerSize-1}" var="i">
								<c:set var="item" value="${shopBannerList[i]}"/>
									<li id="slider${i+1}" class="slider-item" style="height:20px;width:22px;"onclick="changeBanner(${i+1});" class="slider-selected">
									${i+1}
									</li>
								</c:forEach>
							</c:if>
						</ul>
					</div>
					<div id="bannerSwitch" class="slider-page" style="display: none;position: relative;" onmouseover="bannerOver();" onmouseout="bannerOut();">
							<a href="javascript:void(0)" title="上一张" onclick="preBanner();" class="slider-prev"
							style="margin-top: -250px">&lt;</a> 
					</div>
					<div id="bannerSwitch2" class="slider-page" style="display: none;position: relative;" onmouseover="bannerOver();" onmouseout="bannerOut();">
						<a href="javascript:void(0)"  onclick="nextBanner();" class="slider-next"
						style="right: 0px;margin-top: -250px">&gt;</a>
					</div>
				</div>
				</c:if>
			</div>
			
		</div>
		<div class="contentbox3 contentbox">
			<div style="float:left;width:189px;">
				<div id="categorys-2014" class="dorpdown">
					<div class="dd-inner" style="width:189px;">
						<c:forEach items="${goodsCategory}" var="category" varStatus="status">
							<div >
								<div class="item" id="firstCate${status.index}" style="<c:if test="${firstCategoryId == category.id}">background-color: #5CB9CA;</c:if><c:if test="${status.last}">border-bottom:none; </c:if>"">
									
										<a href="${ctx}/shopIndex?pNo=1&shopId=${shopId}&firstCategoryId=${category.id}" style="color:#fff;">
											<span style="text-align: center;">
												${category.name}
											</span><br/>
										</a>
									
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
				<div style="background-color: #fff;">
					<div style="width:100%;background-image: url(images/mall/shop/shopwave.png);height:40px;background-repeat: repeat-x;"></div>
					<div style="padding:10px 20px 12px 20px;">
						<c:if test="${ not empty shopInfo.logo}">
							<div><img class="first big" width="100%" height="100%" src="${sessionScope.image_logo}${shopInfo.logo}"/></div>
						</c:if>
						<c:if test="${ empty shopInfo.logo}">
							<div><img class="first big" width="100%" height="100%" src="${ctx}/images/mall/default_shop.jpg"/></div>
						</c:if>
						<div style="padding: 5px 0;">店铺名称：<span style="color: #28c7c9;">${shopInfo.name}</span></div>
						<div style="padding: 5px 0;">营业时间：<span style="color: #28c7c9;"><fmt:formatDate value="${shopInfo.beginTime }"  pattern="HH:mm"/>-<fmt:formatDate value="${shopInfo.endTime }"  pattern="HH:mm"/></span></div>
					</div>
					<div style="border-top:1px dashed #5CB9CA;height: 1px;overflow:hidden;"></div>
					<div style="padding:12px 20px 50px 20px;">
						<div style="padding: 5px 0;">店铺说明：<span style="width:100%;word-break:break-all;">${shopInfo.descrip}</span></div>
						<div style="padding: 5px 0;">地址：${shopInfo.provinceName}${shopInfo.cityName}${shopInfo.areaName}${shopInfo.address}</div>
						<c:if test="${shopInfo.phone != null}">
							<div style="color: red;font-size: 15px;padding: 5px 0;">电话：${shopInfo.phone}</div>
						</c:if>
						<c:if test="${shopInfo.phone == null && shopInfo.phone2 != null}">
							<div style="color: red;font-size: 15px;padding: 5px 0;">电话：${shopInfo.phone2}</div>
						</c:if>
						<div style="padding-top: 20px;"><a href="#" onclick="fullPic(${shopInfo.businessLicensePhoto});"><img class="first big" width="145" height="150" src="${sessionScope.image_logo}${shopInfo.businessLicensePhoto}"/></a></div>
					</div>
					
				</div>
			</div>
			
			<div style="background: #fff;float: right;width: 1005px;min-height: 720px;">
				<div style="padding:0 22px;">
					<div style="overflow:hidden;">
						<c:forEach items="${couponInfos}" var="item" varStatus="status">
							<div style="margin:30px 8px 20px 8px;height:140px;float:left;">
								<c:if test="${status.index %2 == 0}">
									<div style="float:left;width:10px;background-image: url(images/mall/shop/left.png);height:140px;background-repeat: repeat-y;">
									</div>
								</c:if>
								<c:if test="${status.index %2 != 0}">
									<div style="float:left;width:10px;background-image: url(images/mall/shop/yellowleft.png);height:140px;background-repeat: repeat-y;">
									</div>
								</c:if>
								<div style="width:280px;height:140px;<c:if test="${status.index %2 == 0}">background-color: #5CB9CA;</c:if><c:if test="${status.index %2 != 0}">background-color: #EFB852;</c:if>float:left;">
									<div style="height:100px;" >
										<div style="width:50%;text-align: center;float:left;color:#fff;margin-top:20px;">
										<span style="font-size: 50px;font-weight: bold;">
											<fmt:formatNumber type="number" value="${item.breakPrice}" maxFractionDigits="0"/>
										</span>
										<span>元</span>
										</div>
										<div style="width:50%;text-align: center;float:left;color:#fff;font-size: 16px;margin-top:20px;">
											<p>单笔满<fmt:formatNumber type="number" value="${item.breakLine}" maxFractionDigits="0"/>元使用</p>
											<p style="font-size: 25px;font-weight: bold;">现&nbsp;&nbsp;金&nbsp;&nbsp;券</p>
										</div>
									</div>
									<div style="border-top:1px dashed #fff;height: 1px;overflow:hidden;margin:0px 12px;"></div>
									<div onclick="getCoupon(${item.id})">
										<p style="color:#fff;text-align: center;line-height: 25px;font-size: 16px;cursor: pointer;">抢先领取</p>
									</div>
								</div>
								<c:if test="${status.index %2 == 0}">
									<div style="float:left;width:10px;background-image: url(images/mall/shop/right.png);height:140px;background-repeat: repeat-y;">
									</div>
								</c:if>
								<c:if test="${status.index %2 != 0}">
									<div style="float:left;width:10px;background-image: url(images/mall/shop/yellowright.png);height:140px;background-repeat: repeat-y;">
									</div>
								</c:if>
							</div>
						</c:forEach>
					</div>
				</div>
					<div class="rankAutoplay" style="padding:20px 22px 0px 22px;height:30px;line-height: 30px;">
						<c:forEach items="${secondCategory}" var="item" varStatus="itemstatus">
							<span style="padding: 2px 25px; width:30px;">
								<a style="color:#444444;" href="${ctx}/shopIndex?pNo=1&shopId=${shopId}&goodsCategoryId=${item.id}&firstCategoryId=${item.parentId}">${item.name}</a>
							</span>
						</c:forEach>
					</div>
					<hr style="border-top:1px solid #C7C4C4;margin:0 0 14px 0px;">
					
					<div style="padding:0 20px 20px 20px;overflow:hidden;">
						<c:forEach items="${goodsInfoList.list}" var="item" varStatus="itemstatus">
							<div style="width:200px;float:left;padding:20px;" >
									<div style="text-align: center;">
									<a href="${ctx}/GoodsDetail?id=${item.id}&type=3" target="_blank">
									<img class="first big" width="200" height="200" src="${sessionScope.image_logo}${item.logo}"/>
									</a></div>
									<div style="color:red;padding: 3px 0;">￥<span style="font-size:18px;">${item.price}</span></div>
									<div>${item.name}</div>
									<%-- <div style="border: 1px solid #ddd;text-align: center;width:100px;">
										<span><img src="${ctx}/images/mall/shop/cart.png"></span>
										<span onclick="addToCart('${item.id}','${item.shopId}','${item.name}','${item.logo}','${item.price}','${item.type}','1')" style="cursor: pointer;">加入购物车</span>
									</div> --%>
							</div>
						</c:forEach>
					</div>
					
					<div style="background-color: #fff;height: 80px;">
						<table width="100%">
						<tfoot>
		            	<tr>
			               <td colspan="7">
			               		<div class="page">
										<input id="pages" type="hidden" value="${goodsInfoList.pages}">
										<ul>
											<li><a class="last-page page-change " onclick="gotoPage(${currentPage-1 });">&lt;上一页</a></li>
											<c:if test="${goodsInfoList.firstPage > 1}">
												<li onclick="gotoPage(1);"
													class="page-num"><a>1</a></li>
												<c:if test="${goodsInfoList.firstPage > 2}">
					                       		...
					                       		</c:if>
											</c:if>
											<c:forEach items="${goodsInfoList.navigatepageNums }" var="page">
												<li onclick="gotoPage(${page });"
													class="<c:if test="${currentPage == page }">current</c:if>"
													class="page-num"><a>${page}</a></li>
											</c:forEach>
											<c:if test="${goodsInfoList.lastPage < goodsInfoList.pages}">
												<c:if test="${goodsInfoList.firstPage < goodsInfoList.pages - 1}">
					                       		...
					                       		</c:if>
												<li onclick="gotoPage(${goodsInfoList.pages});"
													class="page-num"><a>${goodsInfoList.pages}</a>
												</li>
											</c:if>
											<li><a class="next-page page-change" onclick="gotoPage(${currentPage+1 });">下一页&gt;</a></li>
										</ul>
									</div>
			               
			                  <%-- <div>
			                    <div style="float:left;padding-left:30px;color:#959191;">
			                      <span class="total">合计 ${goodsInfoList.total} 条数据</span>               
			                    </div>
			                    <div style="float:right;width:20%;"> 
				                  <div style="float:left;">                 
				                      <ul class="footer_ul">
				                      	<c:if test="${goodsInfoList.hasPreviousPage }">
				                        <li onclick="gotoPage(${currentPage-1 });" style="cursor: pointer;width:55px;"><a class="leftRight" >&lt;上一页</a></li>
				                      	</c:if>
				                        <c:if test="${goodsInfoList.firstPage > 1}">
				                        	<li onclick="gotoPage(1);" style="cursor: pointer;width:24px;text-align: center;">
				                             	<a>1</a>
				                        	</li>
				                        	<c:if test="${goodsInfoList.firstPage > 2}">
				                        		...
				                        	</c:if>
				                      	</c:if>
				                        <c:forEach items="${goodsInfoList.navigatepageNums }" var="page">
				                        <li onclick="gotoPage(${page });" class="<c:if test="${currentPage == page }">active</c:if>" style="cursor: pointer;border: 1px solid #9A9A9A;width:24px;text-align: center;">
				                             <a>${page}</a>
				                        </li>
				                        </c:forEach>
				                        <c:if test="${goodsInfoList.lastPage < goodsInfoList.pages}">
				                        	<c:if test="${goodsInfoList.firstPage < goodsInfoList.pages - 1}">
				                        		...
				                        	</c:if>
				                        	<li onclick="gotoPage(${goodsInfoList.pages});" style="cursor: pointer;border: 1px solid #9A9A9A;width:24px;text-align: center;">
				                             	<a>${goodsInfoList.pages}</a>
				                        	</li>
				                      	</c:if>
				                        <c:if test="${goodsInfoList.hasNextPage }">
				                        <li style="cursor: pointer;width:55px;"><a onclick="gotoPage(${currentPage+1});" class="leftRight" >下一页&gt;</a></li>
				                      	</c:if>
				                      </ul>
			                     </div>
		                   		<div style="float:left;  height: 30px;">
									<span style="color: #9A9A9A;">跳转到</span> 
									<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }" style="width:22px;height:20px;text-align: center;">
									<span style="color: #9A9A9A;">页</span> 
									<span class="buttonclass" id="J_JumpTo" onclick="gotoCellInfoPage(null);" style="cursor: pointer;"><a>GO</a></span>
								</div>
			                 </div>
			                 </div> --%>
							</td>
						</tr>
					</tfoot>
					</table>
				</div>
					
			</div>
		</div>
	</div>
	<jsp:include page="/views/common/footer.jsp" />
	<script src="${ctx}/js/slide/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/js/slide/slick.min.js"></script>
	<script type="text/javascript">
     $(document).ready(
			function(){
			    $('.rankAutoplay').slick({
			    	  slidesToShow: 9,
			    	  slidesToScroll: 1,
			    	  /* autoplay: true,
			    	  autoplaySpeed: 2000,
			    	  dots: true, */
			    	});
			}
		) 
	</script>
	</body>
	</html>